<template>
    <div class="echarts">
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <div class="top">
                        <p>今日工作量</p>
                    </div>
                    <div class="bom">
                        <p>样本采集: 3个</p>
                        <p>DNA提取: 0个</p>
                        <p>样本检测: 0个</p>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <div class="top">
                        <p>今日检测结果</p>
                    </div>
                    <div class="bom bom-col">
                        <p>smn_17阳性: 3个</p>
                        <p>smn_18阳性: 0个</p>
                        <p>检测结果阳性: 0个</p>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <div class="top">
                        <p>冰箱数量：8台</p>
                    </div>
                    <div class="bom bom-lo">
                        <p>冻存架个数：98 个</p>
                        <p>冻存盒个数：1652 个</p>
                        <p>冻存盒总孔数：163568 个</p>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <div class="top">
                        <p>样本总数量：14 个</p>
                    </div>
                    <div class="bom bom-lo">
                        <p>容器占用率：0 %</p>
                        <p>样本阳性率：0 %</p>
                        <p>今日阳性率：0 %</p>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="charts">
            <el-row class="line" style="height: 100%;">
                <el-col :span="24">
                    <div class="chas_bg">
                        <div id="main" style="width: 100%; height: 400px;"></div>
                    </div>
                </el-col>
            </el-row>

            <div class="bom_er">
                <el-row :gutter="24">
                    <el-col :span="12">
                        <div class="grid-content bg-purple" style="margin: auto;">
                            <!-- 饼状图 -->
                            <div id="map" style="width: 100%; height: 400px;padding: 20px;"></div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple" style="margin: auto;">
                            <div id="picr" style="width: 100%; height: 400px;padding: 20px;"></div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            chartMain: null,
            chartMap: null,
            chartPicr: null,
            percentage: {
                type: Number,
                default: 0
            }

        }
    },
    mounted() {
        this.drawChart();
        this.drawChart1();
        this.drawChart2();
        this.resizefun = () => {
            this.$echarts.init(document.getElementById('main')).resize();
            this.$echarts.init(document.getElementById('map')).resize();
            this.$echarts.init(document.getElementById('picr')).resize();
            //多个echarts则在此处添加
        };
        window.addEventListener('resize', this.resizefun);

    },
    beforeDestroy() {
        window.removeEventListener('resize', this.resizefun);
        if (this.chartMain) this.chartMain.dispose();
        if (this.chartMap) this.chartMap.dispose();
        if (this.chartPicr) this.chartPicr.dispose();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
            let myChart = this.$echarts.init(document.getElementById("main"));
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: "本周样本存储动态图",
                },
                tooltip: {},
                legend: {
                    data: ["白细胞"],
                },
                xAxis: {
                    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                },
                yAxis: {},
                series: [
                    {
                        name: "销量",
                        type: "line",
                        data: [5, 20, 36, 10, 10, 20, 35],
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        drawChart1() {
            // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
            let myChart = this.$echarts.init(document.getElementById("map"));
            // 指定图表的配置项和数据
            const option = {
                legend: {
                    show: false
                },
                title: {
                    text: "容器使用分布",
                    top: "0%",
                    left: "center"

                },
                series: [
                    {
                        type: "pie",
                        data: [
                            {
                                value: 10,
                                name: "西门子"
                            },
                            {
                                value: 20,
                                name: "二号液氮罐"
                            },
                            {
                                value: 30,
                                name: "基因样本库3号冰箱"
                            },
                            {
                                value: 40,
                                name: "三号低温水箱"
                            },
                            {
                                value: 50,
                                name: "海尔蟹"
                            }
                        ]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        drawChart2() {
            // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
            let myChart = this.$echarts.init(document.getElementById("picr"));
            // 指定图表的配置项和数据
            let option = {
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%",
                },
                title: {
                    text: "容器使用率",
                    top: "0%",
                    left: "center"

                },
                toolbox: {
                    show: false,
                    feature: {
                        restore: {},
                        saveAsImage: {},
                    },
                },
                // 配置
                series: [
                    {
                        name: "容器使用率",
                        type: "gauge",
                        axisLabel: { distance: 0, fontWeight: 100, shadowOffsetY: 100, height: 100 },
                        axisLine: {
                            lineStyle: {
                                width: 10 // 修改仪表盘宽度的属性
                            }
                        },
                        splitLine: {//分隔线样式相关
                            length: 15,//分割线的长度
                            lineStyle: {
                                width: 1,
                                color: '#b0b3b8'
                            }
                        },
                        title: { offsetCenter: [0, '85%'], color: 'red' },
                        detail: { formatter: "{value}%", offsetCenter: [0, '65%'], fontStyle: "oblique", fontSize: 12 },
                        pointer: { width: 4 },
                        data: [{ value: 13.33, name: "容器使用率" }]
                    },
                ],

            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },

    }

}

</script>

<style lang="scss" scoped>
.line {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.echarts {
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    background-color: #fff;
}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
    padding: 10px 5px 10px 5px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    text-align: left;

    .top {
        padding: 18px 20px;
        font-size: 14px;
        color: #20b2aa;
        border-bottom: 1px solid #ebeef5;
    }

    .bom {
        padding: 20px;
        font-size: 14px;
        color: #32cd32;

        p {
            margin: 14px 0;
        }
    }

    .bom-col {
        p {
            color: lightsalmon;
        }
    }

    .bom-lo {
        p {
            color: #000;
        }
    }
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>